<template>
  <div class="page">
    <m-header :title="langText&&langText.withdrawaladdress" :canback="Boolean(1)"></m-header>
    <div class="body">
      <form class="tj-form">
        <div class="form-item">
          <label for="name">{{langText&&langText.newaddress}}</label>
          <input type="text" :placeholder="langText&&langText.peanwa" v-model="formData.cash_url" />
        </div>
        <div class="form-item">
          <label for="name">{{langText&&langText.confirmationaddress}}</label>
          <input type="text" :placeholder="langText&&langText.peaca" v-model="formData.confirm_cash_url" />
        </div>
        <!-- <div class="form-item">
          <label for="name">{{langText&&langText.yzcode}}</label>
          <div class="item-flex code">
            <input
              type="number"
              :placeholder="langText&&langText.pevc"
              v-model="formData.captcha"
              oninput="if(value.length>4)value=value.slice(0,4)"
            />
            <button
              type="button"
              class="btn btn-origin"
              :disabled="seconds>0"
              @click="sendCode"
            >{{seconds==0?langText&&langText.send:"("+seconds+"s)"}}</button>
          </div>
        </div> -->
        <!-- <button type="button" class="btn-submit btn-origin" @click="confirm">{{UserInfo.save}}</button> -->
        <button type="button" class="btn-submit btn-origin" @click="confirm">{{langText&&langText.confirmchanges}}</button>
      </form>
    </div>
    <m-load ref="load"></m-load>
  </div>
</template>
<script>
import { Owner, Init } from "@/server/server.js";
import { mapGetters } from "vuex";
import { Load } from "@/assets/commonjs/utils.js";
import { MyTxt,TradeTxt } from "@/assets/commonjs/lan.js";

export default {
  data() {
    return {
      allTxt:null,
      langText:null,
      formData: {
        captcha: 8888,
        cash_url: null,
        confirm_cash_url:null,
      },
      seconds: 0,
      Register: {},
      UserInfo: {},
    };
  },
  mounted(){
    this.initDate();
    // console.log(this.userInfo)
  },
  created () {

  },
  methods: {
    initDate(){
      this.allTxt = Object.assign({},MyTxt,TradeTxt)
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('mineData')))
    },
    confirm() {
      if (!this.formData.cash_url) {
        // mui.toast(this.Today.enter);
        return;
      }
      if(this.formData.confirm_cash_url != this.formData.cash_url){
        // mui.toast('两次输入的地址不一致')
        mui.toast(this.langText&&this.langText.iaet)
        return;
      }
      let _This =this;
      Load.loadStart(this);
      Owner.cashAddress(this.formData).then(res => {
        if (res.code == 1) {
          mui.toast(res.msg);
          setTimeout(() => {
            _This.$router.go(-1);
            Load.loadEnd(_This);
          }, 500);
        } else {
          mui.toast(res.msg);
          Load.loadEnd(_This);
        }
      });
    },
    sendCode() {
      this.seconds = 60;
      let get = setInterval(() => {
        this.$nextTick(() => {
          this.seconds = this.seconds - 1;
          if (this.seconds <= 0) {
            clearInterval(get);
          }
        });
      }, 1000);
      // 发送验证码
      Init.send({ email: this.userInfo.username, event: "cash_address" }).then(
        res => {
          mui.toast(res.msg);
        }
      );
    }
  },
  computed: {
    ...mapGetters(["userInfo","lang",'getLangId'])
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  //   padding: @margin-primary;
  background-color: #fff;
  color: #333;
  font-size: 34px;
  .tj-form {
    margin-top: 0;
    .form-item {
      .display-flex();
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      .item-flex {
        padding: 0 30px;
        flex: 2;
        .btn-origin {
          flex: 1;
          margin: 0;
          background: none;
          color: #4EB6AD;
          border-left: 1px solid #ccc;
          border-radius: 0;
          font-size: 34px;
        }
        & > input {
          flex: 1;
          padding: 0;
          margin: 0;
          background: none;
          color: #000;
          border: none;
        }
      }
      & > label {
        flex: 0.7;
        color: #333;
      }
      & > input {
        flex: 2;
        margin: 0;
        background: none;
        color: #000;
        border: none;
      }
    }
  }
  .btn-submit {
    margin-top: 76px;
    // background: #406ec3;
    background: #4EB6AD;
  }
}

input{
  // color: red!important;
  &::-webkit-input-placeholder{
    font-size: 16px !important;
    color: #999 !important;
  }
  &::-moz-placeholder{
    font-size: 16px !important;
    color: #999 !important;
  }
  &::-ms-input-placeholder{
    font-size: 16px !important;
    color: #999 !important;
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>